<template>
    <div class='bottom'>
        <div class='movie'>
          <router-link :to = '{path : "/movie",query : {name : cityN,id : cityI}}' :class = '{"active" : flag == 0}'>
          <div><i class = 'iconfont icon-dianying2'></i></div>
          <div>电影</div>
          </router-link>                                                  
          </div>
        <div class='cinema'>
          <router-link :to = '{path : "/cinema",query : {name : cityN,id : cityI}}' :class = '{"active" : flag == 1}'>
         <div><i class = 'iconfont icon-yingyuan'></i></div>
          <div>影院</div>
          </router-link>
          </div>
        <div class='mine'>
          <router-link :to = '{path : "/mine",query : {name : cityN,id : cityI}}' :class = '{"active" : flag == 2}'>
          <div><i class = 'iconfont icon-geren'></i></div>
          <div>我的</div>
          </router-link>
          </div>
    </div>
</template>
<script>
export default{
    name : 'myBottom',
    data(){
      return {
        // cityN : '',
        // cityI : 0,
      }
    },
    props:{
      moviecity : {
        type : String,
        // default : '广州',
      },
      mcityId : {
        // type : Number,
        // default : 20,
      },
      Ccity : {
        type : String,
        // default : '广州',
      },
      CId : {
        // type : Number,
        // default : 20,
      },
      mineCity : {

      },
      mineId : {

      },
      flag : {
        type : Number,
        // default : 0,
      }
    },
    computed:{
      cityI(){
        let id = this.mcityId || this.CId || this.mineId;
        return id;
      },
      cityN(){
        let city = this.moviecity || this.Ccity || this.mineCity
        return city;
      }
    }
    // mounted(){
    //  this.cityI = this.mcityId || this.CId || this.mineId;
    //  this.cityN = this.moviecity || this.Ccity || this.mineCity;
    //   // console.log(this.mcityId,this.CId,this.mineId,this.cityI)
    // }
}
</script>
<style lang='scss' scoped>
@import '../assets/font/font_icon/iconfont.css';
.bottom{
    position : fixed;
    bottom : 0;
    display : flex;
    width : 100%;
    height : 55px;
    padding-top : 5px;
    border-top : 1px solid #ddd;
    z-index : 2;
    background-color : white;
    div.movie,div.cinema,div.mine{
      flex-basis: 33.33333%;
      text-align : center;
      .iconfont{
        font-size : 24px;
      }
      div{
        margin-top : 2px;
        font-size : 12px;
      }
    }
    .active{
      color : #FF9900;
    }
  }
</style>